<template>
	<view class="content">
		<u-popup mode="bottom" v-model="tagSheetVisible" :border-radius="36" :closeable="false">
			<view class="bottomSheet_content">
				<scroll-view scroll-y="true">
					<view class="title">选择您的标签</view>
					<view class="sp" v-for="(row,index) in tagsData" :key="index">
						<u-tag :text="row.value" type="info" shape="circle " :mode="row.select === false ? 'plain' : 'dark'" @tap="selectTag(index)" />
					</view>
				</scroll-view>
			</view>
		</u-popup>

<!-- 		<view class="avater_area">
			<avatar selWidth="200px" selHeight="400upx" @upload="uploadHead" :avatarSrc="userInfo.headphoto" avatarStyle="width: 120upx; height: 120upx; border-radius: 50%;background: #d8d8d8"></avatar>
		</view> -->

		<view class="list">
			<view class="title_top">基本信息</view>
			<view class="row">
				<view class="title">头像</view>
				<view class="right">
					<avatar refs="avater" selWidth="200px" selHeight="400upx" @upload="uploadHead" :avatarSrc="userInfo.headphoto" avatarStyle="width: 84upx; height: 84upx; border-radius: 50%;background: #d8d8d8"></avatar>
				</view>
			</view>
			<view class="row">
				<view class="title">昵称</view>
				<view class="right">
					<view class="input"><input maxlength="5" name="nickname" v-model="userInfo.nickname" type="text" placeholder-class="input_pla" /></view>
				</view>
			</view>
			<view class="row" @click="openSexShow">
				<view class="title">性别</view>
				<view class="right">
					<view class="tis">{{ userInfo.gander === 0 ? "男":"女" }}</view>
					<view class="icon xiangyou"></view>
				</view>
			</view>
			<u-picker mode="selector" v-model="sexShow" :default-selector="[sexIndex]" :range="sexSelector" @confirm="selectSex"></u-picker>
			<view class="row" @click="openheightShow" v-if="role === 'stylist'">
				<view class="title">身高</view>
				<view class="right">
					<view class="tis">{{ userInfo.height === null ? 0 : userInfo.height }}cm</view>
					<view class="icon xiangyou"></view>
				</view>
			</view>
			<u-picker mode="selector" v-model="heightShow" :default-selector="[heightIndex]" :range="heightSelector" @confirm="selectHeight"></u-picker>
			<view class="row" style="padding-bottom: 32upx;" @click="openweightShow" v-if="role === 'stylist'">
				<view class="title">体重</view>
				<view class="right">
					<view class="tis">{{ userInfo.weight === null ? 0 : userInfo.weight }}kg</view>
					<view class="icon xiangyou"></view>
				</view>
			</view>
			<u-picker mode="selector" v-model="weightShow" :default-selector="[weightIndex]" :range="weightSelector" @confirm="selectWeight"></u-picker>
		</view>
		<view class="list" v-if="role === 'stylist'">
			<view class="title_top">擅长风格</view>
			<view class="row">
				<view class="taglist">
					<view class="flex_wrap" v-if="tagsList.length > 0">
						<u-tag :text="row" type="info" shape="circle " mode="plain" :key="index" v-for="(row,index) in tagsList" style="margin-right: 12upx;margin-bottom: 10upx;" />
					</view>
					<view style="width: 46upx;" @tap="showNav">
						<image src="../../static/img/select.png" mode="aspectFit" style="width: 46upx;height: 46upx;"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="btn_area mocup_btn" @click="save">保存</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		isBlank
	} from '@/utils/common.js'
	import avatar from "@/pagesB/components/yq-avatar/yq-avatar.vue";

	export default {
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				postData: {
					key: '',
					token: ''
				},
				sexShow: false,
				sexSelector: ["男", "女"],
				sexIndex: 0,
				heightIndex: 0,
				weightIndex: 0,
				heightShow: false,
				heightSelector: [],
				weightShow: false,
				weightSelector: [],
				tagsData: [],
				tagSheetVisible: false,
				// 风格类型list
				tagsList: [],
				// 
				role: 'stylist'
			};
		},
		components: {
			avatar
		},
		onLoad(options) {
			if (options.role) {
				this.role = 'user'
			}

			for (let i = 140; i < 220; i++) {
				this.heightSelector.push(i)
			}
			for (let i = 40; i < 90; i++) {
				this.weightSelector.push(i)
			}

			this.tagsList = JSON.parse(this.userInfo.tags)
			// 获取擅长的风格
			this.getDictionary()
		},
		methods: {
			...mapMutations(['getUser']),
			getDictionary() {
				var data = {
					dicType: 'style'
				}

				this.$u.api.findDicByType(data).then(res => {
					if (res.code === 200) {
						this.tagsData = res.data
						for (let i in this.tagsData) {
							this.tagsData[i].select = false
						}

						// 设置已选中的标签
						if (!isBlank(this.tagsList)) {
							let tags = this.tagsList
							for (let i in tags) {
								for (let j in this.tagsData) {
									if (this.tagsData[j].value === tags[i]) {
										this.tagsData[j].select = true
									}
								}
							}
						}

					}
				})
			},
			openSexShow() {
				if (this.userInfo.gander === 0) {
					this.sexIndex = 0
				} else {
					this.sexIndex = 1
				}
				this.sexShow = true
			},
			openheightShow() {
				for (let i in this.heightSelector) {
					if (this.userInfo.height === this.heightSelector[i]) {
						this.heightIndex = i
					}
				}
				this.heightShow = true
			},
			openweightShow() {
				for (let i in this.weightSelector) {
					if (this.userInfo.weight === this.weightSelector[i]) {
						this.weightIndex = i
					}
				}
				this.weightShow = true
			},
			selectSex(index) {
				this.userInfo.gander = index[0]
				this.sexShow = false
			},
			selectHeight(index) {
				this.userInfo.height = this.heightSelector[index]
				this.heightShow = false
			},
			selectWeight(index) {
				this.userInfo.weight = this.weightSelector[index]
				this.weightShow = false
			},
			showNav() {
				this.tagSheetVisible = true
			},
			// 选择标签
			selectTag(index) {
				let list = []
				this.tagsData[index].select = !this.tagsData[index].select
				for (let i in this.tagsData) {
					if (this.tagsData[i].select === true) {
						list.push(this.tagsData[i].value)
					}
				}
				this.tagsList = list
			},
			// 上传头像
			uploadHead(rsp) {
				var _this = this
				_this.userInfo.headphoto = rsp.path
				uni.showLoading({
					title: '上传中...'
				});

				let tempFilePaths = rsp.path

				// 获取token 
				_this.$u.api.getPostingQiniuToken().then(res => {
					if (res.code === 200) {
						_this.postData.token = JSON.parse(res.data).qiniuToken
						_this.postData.key = _this.$u.guid(32)
						console.log(_this.postData)
						uni.uploadFile({
							url: 'https://upload-Z2.qiniup.com', //华南地区用这个
							filePath: tempFilePaths,
							name: 'file',
							formData: {
								'key': _this.postData.key,
								'token': _this.postData.token
							},
							success: (uploadFileRes) => {
								let img = "https://posting.imguangguang.com/" + JSON.parse(uploadFileRes.data).key
								_this.userInfo.headphoto = img
							},
							fail: (error) => {
								if (error && error.response) {
									uni.showToast({
										title: error.response,
										icon: 'none'
									})
								}
							},
							complete: () => {
								setTimeout(function() {
									uni.hideLoading();
								}, 250);
							},
						});

					}
				})
			},
			// 保存资料
			async save() {
				if (isBlank(this.userInfo.nickname)) {
					uni.showToast({
						icon: 'none',
						title: "用户昵称不能为空"
					})
					return
				}

				uni.showLoading({
					title: "正在保存"
				})

				var param = {
					headphoto: this.userInfo.headphoto,
					nickname: this.userInfo.nickname,
					gander: this.userInfo.gander,
					height: this.userInfo.height,
					weight: this.userInfo.weight,
					tags: JSON.stringify(this.tagsList)
				}

				this.$u.api.editUser(param).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						// 保存用户信息
						let userInfo = uni.getStorageSync('userInfo')
						userInfo.headphoto = this.userInfo.headphoto
						userInfo.nickname = this.userInfo.nickname
						userInfo.gander = this.userInfo.gander
						userInfo.height = this.userInfo.height
						userInfo.weight = this.userInfo.weight
						userInfo.tags = JSON.stringify(this.tagsList)
						this.getUser(userInfo)

						uni.showToast({
							title: '保存成功',
							duration: 1000,
							success: () => {
								uni.navigateBack({
									delta: 1
								})
							}
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
		height: 100%;

		.content {
			background-color: #f4f4f4;
			padding: 0 30upx 92upx 30upx;
			display: flex;
			flex-direction: column;
			// justify-content: space-between;
			height: 100%;

			.title_top {
				font-weight: bold;
				font-size: 28upx;
				color: #333333;
				padding: 32upx 0 20upx 0;
			}

			.icon {
				font-size: 30upx;
			}

			.avater_area {
				margin: 32upx auto 12upx auto;
			}


			.list {
				width: 100%;
				margin-bottom: 20upx;
				border-radius: 12upx;

				.row {
					widows: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					background-color: #fff;
					padding: 16upx 20upx 16upx 20upx;


					.title {
						font-size: 32upx;
						color: #333333;
						font-weight: bold;
					}

					.tis {
						font-size: 26upx;
						margin-right: 5upx;
						max-height: 120upx;

						image {
							width: 100upx;
							height: 100upx;
							border-radius: 100%;
							margin: 10upx 0;
						}
					}

					.right {
						display: flex;
						align-items: center;
						color: #999;

						.icon {
							padding-top: 5upx;
							width: 42upx;
							color: #909090;
						}

						.input {
							display: flex;
							align-items: center;
							font-size: 26upx;

							input {
								width: 100%;
								text-align: right;
							}
						}

						.input_pla {
							color: #666666;
							font-size: 26upx;
						}
					}


					// 标签列表
					.taglist {
						margin-bottom: 20upx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						width: 100%;

						.box {
							padding: 8upx 28upx 8upx 28upx;
							border-radius: 24upx;
							border: 1px solid #1C1724;
							margin-right: 24upx;
							margin-bottom: 5upx;
							display: inline-block;

							.img {
								width: 100%;
								display: flex;
								justify-content: center;

								.icon {
									font-size: 50upx;
									color: #464646;
								}
							}

							.text {
								width: 100%;
								display: flex;
								justify-content: center;
								font-size: 28upx;
								color: #3d3d3d;
							}
						}
					}

				}
			}
		}

		.btn_area {
			width: 310upx;
			height: 90upx;
			line-height: 90upx;
			text-align: center;
			margin: 0 auto;
			font-size: 32upx !important;
			position: fixed;
			bottom: 92upx;
			left: 220upx;
			right: 220upx;

		}

		.bottomSheet_content {
			margin: 28upx 30upx;
			display: flex;
			flex-direction: column;
			min-height: 663upx;

			.title {
				font-size: 36upx;
				font-weight: bold;
				color: #333333;
				margin: 16upx;
				text-align: center;
			}

			.sp {
				margin: 12upx 16upx 0 0;
				display: inline-block;
			}

			.tag {
				display: inline-block;

				.tag_content {
					display: flex;
					align-items: center;
					font-size: 26upx;
					padding: 6upx 12upx;
					border-radius: 8upx;
					margin: 0 32upx 20upx 0;
					background-color: #F4F4F4;

					image {
						width: 28upx;
						height: 28upx;
						margin-right: 16upx;
					}
				}
			}
		}
	}
</style>
